import { WhiteSpace } from '@ant-design/react-native';
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

type FieldType = 'phone' | 'email' | 'password' | 'familyName' | 'nickname';

interface ProfileEditorProps {
    fields?: FieldType[];
    initialPhone?: string;
    initialEmail?: string;
    initialPassword?: string;
    initialFamilyName?: string;
    initialNickname?: string; // 新增
    onChange?: (data: { phone?: string; email?: string; password?: string; confirmPassword?: string; familyName?: string; nickname?: string }) => void;
    isRegister?: boolean;
    showLabel?: boolean;
}

const ProfileEditor: React.FC<ProfileEditorProps> = ({
    fields = ['phone', 'email', 'password', 'familyName', 'nickname'], // 默认包含所有字段
    initialPhone = '',
    initialEmail = '',
    initialPassword = '',
    initialFamilyName = '',
    initialNickname = '',
    onChange,
    isRegister = false,
    showLabel = true,
}) => {
    const [phone, setPhone] = useState(initialPhone);
    const [email, setEmail] = useState(initialEmail);
    const [password, setPassword] = useState(initialPassword);
    const [confirmPassword, setConfirmPassword] = useState('');
    const [familyName, setFamilyName] = useState(initialFamilyName);
    const [nickname, setNickname] = useState(initialNickname); // 新增

    useEffect(() => {
        setPhone(initialPhone);
    }, [initialPhone]);

    useEffect(() => {
        setNickname(initialNickname);
    }, [initialNickname]);

    useEffect(() => {
        setPassword(initialPassword);
    }, [initialPassword]);

    const handlePhoneChange = (val: string) => {
        setPhone(val);
        onChange && onChange({ phone: val, email, password, confirmPassword, familyName, nickname });
    };
    const handleEmailChange = (val: string) => {
        setEmail(val);
        onChange && onChange({ phone, email: val, password, confirmPassword, familyName, nickname });
    };
    const handlePasswordChange = (val: string) => {
        setPassword(val);
        onChange && onChange({ phone, email, password: val, confirmPassword, familyName, nickname });
    };
    const handleConfirmPasswordChange = (val: string) => {
        setConfirmPassword(val);
        onChange && onChange({ phone, email, password, confirmPassword: val, familyName, nickname });
    };
    const handleFamilyNameChange = (val: string) => {
        setFamilyName(val);
        onChange && onChange({ phone, email, password, confirmPassword, familyName: val, nickname });
    };
    const handleNicknameChange = (val: string) => {
        setNickname(val);
        onChange && onChange({ phone, email, password, confirmPassword, familyName, nickname: val });
    };

    return (
        <View style={styles.container}>
            {fields.includes('phone') && (
                <>
                    {showLabel && <Text style={styles.label}>手机号</Text>}
                    <TextInput
                        style={styles.input}
                        value={phone}
                        onChangeText={handlePhoneChange}
                        placeholder="请输入手机号"
                        keyboardType="phone-pad"
                    />
                </>
            )}
            {fields.includes('email') && (
                <>
                    {showLabel && <Text style={styles.label}>邮箱</Text>}
                    <TextInput
                        style={styles.input}
                        value={email}
                        onChangeText={handleEmailChange}
                        placeholder="请输入邮箱"
                        keyboardType="email-address"
                        autoCapitalize="none"
                    />
                </>
            )}
            {fields.includes('password') && (
                <>
                    {showLabel && <Text style={styles.label}>密码</Text>}
                    <TextInput
                        style={styles.input}
                        value={password}
                        onChangeText={handlePasswordChange}
                        placeholder="请输入密码"
                        secureTextEntry
                    />
                </>
            )}
            {isRegister && (
                <>
                    {showLabel && <Text style={styles.label}>确认密码</Text>}
                    <TextInput
                        style={styles.input}
                        value={confirmPassword}
                        onChangeText={handleConfirmPasswordChange}
                        placeholder="请再次输入密码"
                        secureTextEntry
                    />
                </>
            )}
            {fields.includes('familyName') && (
                <>
                    {showLabel && <Text style={styles.label}>家庭名称</Text>}
                    <TextInput
                        style={styles.input}
                        value={familyName}
                        onChangeText={handleFamilyNameChange}
                        placeholder="请输入家庭名称"
                    />
                </>
            )}
            {fields.includes('nickname') && (
                <>
                    {showLabel && <Text style={styles.label}>昵称</Text>}
                    <TextInput
                        style={styles.input}
                        value={nickname}
                        onChangeText={handleNicknameChange}
                        placeholder="请输入昵称"
                    />
                </>
            )}
            <WhiteSpace size='lg'/>
            <WhiteSpace size='lg'/>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        width: 330,
        backgroundColor: 'transparent',
        borderRadius: 12,
        alignSelf: 'center',
    },
    label: {
        fontSize: 16,
        color: '#888',
        marginBottom: 6,
        marginTop: 12,
        // paddingLeft: 16,
    },
    input: {
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 20,
        paddingHorizontal: 12,
        paddingVertical: 8,
        fontSize: 16,
        height: 50,
        width: '100%',
        backgroundColor: '#fafafa',
    },
    button: {
        marginTop: 24,
        backgroundColor: '#3366cc',
        borderRadius: 8,
        paddingVertical: 10,
        alignItems: 'center',
    },
    buttonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
    },
});

export default ProfileEditor;